<template>
    <div class="left-center" ref="left2">

    </div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, ref } from 'vue';
let myChart = null
let left2 = ref(null)
let initOptions = () => {
    myChart = echarts.init(left2.value)
    myChart.setOption({
        title: {
            text: '商家销售统计',
            textStyle: {

                fontSize: '20',
                color: 'white',
            },
            left: '35%',
            top: "5%"
        },
        grid: {
            top: '22%',
            left: '3%',
            right: '3%',
            bottom: '2%',
            containLabel: true
        },
        tooltip: {
            
            formatter: (e) => {
                var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>'
                return `<div>
                <p> ${e.name}</p>
                ${dotHtml} <span>直接放问</span>  ${e.data}
                </div>`

            }
        },
        xAxis: [
            {
                type: 'value',

                min: 0,
                max: 700,
                interval: 100,
                axisLabel: {
                    color: '#eee'
                },
                axisLine: {
                    show: true,
                }
            }
        ],
        yAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五'],
                axisLabel: {
                    color: '#eee'
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: '1',
                        type: 'solid',
                    }
                },
            }
        ],
        series: [
            {
                data: [120, 320, 400, 200, 700],
                type: 'bar',
                barWidth: 20,

                itemStyle: {
                    barBorderRadius: [5, 5, 5, 5],
                    color: '#409eff'
                },
                label: {
                  show: true, //开启显示数值
                  position: 'insideRight', //数值在上方显示
                  textStyle: {  //数值样式
                    color: 'white',   //字体颜色
                    fontSize: 14  //字体大小
                  }
                }
            }
        ]


    })
}

onMounted(() => {
    initOptions()
})
</script>
<style scoped lang='scss'>
.left-center {
    width: 100%;
    height: 100%;
}
</style>